﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <script type="text/javascript" src="js/rem.js"></script>
  <link rel="stylesheet" href="css/style.css">
  <title>电商平台系统</title>
</head>

<body style="visibility: hidden;">
  <div class="container-flex" tabindex="0" hidefocus="true">
    <!-- !左边 -->
    <div class="box-left">
      <!-- ?当前比对数据 -->
      <div class="left-top">
        <div class="current-num">
          <div>网站访问记录数</div>
          <p id="pv">3,456,789</p>
        </div>
      </div>
      <!-- ?系统男女比例 -->
      <div class="left-center">
        <div class="title-box">
          <h6>系统男女比例</h6>
        </div>
        <div class="chart-box pie-chart" style="">
          <div id="pie_fanzui" style="width:100%;"></div>
        </div>
      </div>
      <!-- ?类目周销量TOP10 -->
      <div class="right-center">
        <div class="title-box">
          <h6>类目销量TOP10</h6>
        </div>
        <div class="chart-box pie-chart">
          <div id="qufenbu_data1" style="width:94%;height:280px;margin-top:20px;"></div>
        </div>
      </div>
    </div>
    <!-- !中间 -->
    <div class="box-center">
      <div class="center-top">
        <h1>
          电商系统平台
        </h1>
      </div>

      <div class="center-center">
        <div class="weather-box">
          <div class="data">
            <p class="time" id="time">00:00:00</p>
            <p id="date"></p>
          </div>
          <div class="weather">
            <img id="weatherImg" src="images/weather/weather_img01.png" alt="">
            <div id="weather">
              <p class="active">多云</p>
              <p>16-22℃</p>
              <p>天津市和平区</p>
            </div>
          </div>
        </div>
        <img src="images/line_bg.png" alt="">
        <div class="select-box" style="height: 0.3rem;">
          <div data-type="2">
            <div id="pro_user" class="select" tabindex="0" hidefocus="true">
              <p style="color:#FFFF00;font-weight:bold;">NO.1 <span></span>人</p>
              <p style="color:#7FFF00;font-weight:bold;">NO.2 <span></span>人</p>
              <p style="color:#7FFFD4;font-weight:bold;">NO.3 <span></span>人</p>
            </div>

          </div>
        </div>
      </div>

      <div class="center-bottom">
        <div class="chart-box">
          <div id="china_map" style="width:100%;height:95%;"></div>
        </div>
      </div>
    </div>
    <!-- !右边 -->
    <div class="box-right">
      <div class="right-top">
        <div class="title-box">
          <h6 id="barTitle">不同年龄阶段消费占比</h6>

        </div>
        <p class="unit">单位：销量</p>
        <div class="chart-box">
          <div id="pie_age" style="width:100%;height:100%;"></div>
        </div>

      </div>

      <div class="right-center">
        <div class="title-box">
          <h6>销量排名前十区域</h6>
        </div>
        <div class="chart-box pie-chart">
          <div id="qufenbu_data" style="width:90%;height:220px;margin-left:10px;"></div>
        </div>
      </div>

      <div class="right-bottom">
        <div class="title-box">
          <p id="switchBtn"><span class="active" data-dataType="income">各时间段浏览数量</span></p>

        </div>
        <div id="line_time" style="width:90%;height:220px;margin-left:10px;"></div>

      </div>
    </div>
  </div>
</body>


<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/infographic.js"></script>
<script type="text/javascript" src="js/macarons.js"></script>
<script type="text/javascript" src="js/shine.js"></script>
<script type="text/javascript" src="js/base.js"></script>

<script type="text/javascript">
  $('document').ready(function () {
    $("body").css('visibility', 'visible');
    var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
    localStorage.setItem("data", localData);
  })
</script>



</html>